<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :model="form" :label-width="80" :rules="rule" inline>
          <FormItem label="工人名">
            <Input v-model="form.workerName" placeholder="工人用户名"></Input>
          </FormItem>
          <FormItem label="工人状态">
            <Select v-model="form.state" style="width: 200px">
              <Option value="">全部</Option>
              <Option value="1">正常</Option>
              <Option value="2">禁用</Option>
            </Select>
          </FormItem>
          <FormItem label="起止时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">搜索</Button>
          </FormItem>
          <FormItem>
            <Button type="success" @click="add()">新增</Button>
          </FormItem>
        </Form>
      </Col>
      <Col :span="24">
        <div class="table-container">
          <Table border :max-height="800" stripe :columns="getCols()" :data="tableData" no-data-text="未查询到数据"></Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="PageChange"></Page>
        </div>
      </Col>
    </Row>

    <Modal v-model="isShowAdd" title="添加用户" @on-ok="submitAdd">
      <Form ref="form" :model="addRow" :label-width="120">
        <FormItem label="工人用户名">
          <Input v-model="addRow.workerName"></Input>
        </FormItem>
        <FormItem label="工人所属用户">
          <Select v-model="addRow.userId" style="width: 200px">
            <Option v-for="item in userList" :value="item.user_id">{{ item.user_name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="addRow.userPhone"></Input>
        </FormItem>
        <FormItem label="工人密码">
          <Input v-model="addRow.userEncryption"></Input>
        </FormItem>
        <FormItem label="工人标题">
          <Input v-model="addRow.workerHeadline"></Input>
        </FormItem>
        <FormItem label="工人说明">
          <Input type="textarea" v-model="addRow.workerExplain"></Input>
        </FormItem>
        <FormItem label="工人等级">
          <Input v-model="addRow.workerClass"></Input>
        </FormItem>
        <FormItem label="工龄">
          <Input v-model="addRow.workerYear"></Input>
        </FormItem>
        <FormItem label="工人地址">
          <Input v-model="addRow.workerAddress"></Input>
        </FormItem>
        <FormItem label="工人身份证号">
          <Input v-model="addRow.workerNumber"></Input>
        </FormItem>
        <FormItem label="工人信用等级">
          <Input v-model="addRow.workerRating"></Input>
        </FormItem>
        <FormItem label="工人价格">
          <Input v-model="addRow.workerPrice"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="isShowUpdate" title="修改用户" @on-ok="submitUpdate">
      <Form ref="form" :model="updateRow" :label-width="120">
        <FormItem label="手机号">
          <Input v-model="updateRow.userPhone"></Input>
        </FormItem>
        <FormItem label="工人所属用户">
          <Select v-model="addRow.userId" style="width: 200px">
            <Option v-for="item in userList" :value="item.user_id">{{ item.user_name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="工人标题">
          <Input v-model="updateRow.workerHeadline"></Input>
        </FormItem>
        <FormItem label="工人说明">
          <Input type="textarea" v-model="updateRow.workerExplain"></Input>
        </FormItem>
        <FormItem label="工人等级">
          <Input v-model="updateRow.workerClass"></Input>
        </FormItem>
        <FormItem label="工龄">
          <Input v-model="updateRow.workerYear"></Input>
        </FormItem>
        <FormItem label="工人地址">
          <Input v-model="updateRow.workerAddress"></Input>
        </FormItem>
        <FormItem label="工人身份证号">
          <Input v-model="updateRow.workerNumber"></Input>
        </FormItem>
        <FormItem label="工人信用等级">
          <Input v-model="updateRow.workerRating"></Input>
        </FormItem>
        <FormItem label="工人价格">
          <Input v-model="updateRow.workerPrice"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "worker",
  data() {
    return {
      form: {
        workerName: '',
        state: '',
        startTime: '',
        endTime: '',
      },
      pageNum: 0,
      pageSize: 10,
      total: 0,
      tableData: [],
      rule: {},
      isShowAdd: false,
      isShowUpdate: false,
      addRow: {
        workerName: '', userId: -1, userPhone: '', userEncryption: '', workerHeadline: '', workerExplain: '',
        workerClass: '', workerYear: '', workerAddress: '', workerNumber: '', workerRating: '', workerPrice: ''
      },
      updateRow: {},
      userList: []
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    getCols() {
      let that = this;
      return [
        {title: '工人名字', key: 'workerName', tooltip: true, align: 'center'},
        {
          title: '工人照片', key: 'workerPicture', tooltip: true, align: 'center', width: 100, render(h, obj) {
            return h(('img'), {attrs: {src: obj.row.workerPicture}, style: 'max-width:50px;max-height:40px;'})
          }
        },
        {title: '工人手机号', key: 'userPhone', tooltip: true, align: 'center'},
        {title: '工人标题', key: 'workerHeadline', tooltip: true, maxWidth: 200, align: 'center'},
        {title: '工人描述', key: 'workerExplain', tooltip: true, maxWidth: 300, align: 'center'},
        {title: '工人等级', key: 'workerClass', tooltip: true, maxWidth: 100, align: 'center'},
        {title: '工人工龄', key: 'workerYear', tooltip: true, maxWidth: 100, align: 'center'},
        {title: '工人所在地', key: 'workerAddress', tooltip: true, maxWidth: 150, align: 'center'},
        {title: '工人身份证', key: 'workerNumber', tooltip: true, maxWidth: 150, align: 'center'},
        {title: '工人信用等级', key: 'workerRating', tooltip: true, maxWidth: 100, align: 'center'},
        {title: '工人价格', key: 'workerPrice', tooltip: true, maxWidth: 100, align: 'center'},
        {title: '工人积分', key: 'workerIntegral', tooltip: true, maxWidth: 100, align: 'center'},
        {title: '注册时间', key: 'workerCretime', tooltip: true, maxWidth: 150, align: 'center'},
        {
          title: '状态', key: 'state', tooltip: true, align: 'center', width: 100, render(h, obj) {
            return h(('Button'), {
              attrs: {type: obj.row.workerStatus === "1" ? "success" : "error"}, on: {
                click: () => {
                  that.delWorker(obj.row)
                }
              }
            }, obj.row.workerStatus === "1" ? "正常" : "禁用")
          }
        },
        {
          title: '操作', key: 'operator', tooltip: true, align: 'center', width: 100, render(h, obj) {
            return h(('Button'), {
              attrs: {type: "success"},
              on: {
                click: () => {
                  that.showUpdateModel(obj.row);
                }
              }
            }, "修改")
          }
        }
      ]
    },
    showUpdateModel(row) {
      let that = this;
      that.$http.get('/userListSimple').then(res => {
        that.userList = res
      })
      this.isShowUpdate = true
      this.updateRow = row
    },
    add() {
      let that = this;
      that.$http.get('/userListSimple').then(res => {
        that.userList = res
      })
      this.isShowAdd = true
    },
    submitAdd() {
      let that = this;
      that.$http.postJson('/addWorker', that.addRow).then(res => {
        that.$Message.success("添加用户成功")
        that.loadData()
      }).catch(() => {
        that.$Message.error("添加用户失败")
      })
    },
    submitUpdate() {
      let that = this;
      that.$http.postJson('/updateWorker', this.updateRow).then(res => {
        that.$Message.success("更新用户信息成功")
        that.loadData()
      }).catch(() => {
        that.$Message.error("更新用户信息失败")
      })
    },
    delWorker(row) {
      debugger
      let that = this;
      row.workerStatus = row.workerStatus === "1" ? "2" : "1"
      that.$http.postJson('/delWorker', row).then(res => {
        that.$Message.success("修改工人状态成功")
        that.loadData()
      }).catch(() => {
        that.$Message.error("修改工人状态失败")
      })
    },
    times(val) {
      this.form.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.form.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    PageChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    search() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loadData()
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    loadData() {
      let params = {
        workerName: this.form.workerName,
        state: this.form.state,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      let that = this;
      this.$http.postJson('/worker/list', params).then(res => {
        that.total = res.total
        that.tableData = res.data
        that.pageNum = res.pageNum
        that.pageSize = res.pageSize
      })
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
